<style lang="less">
    @import './list.less';
</style>

<template>
    <div class="user-list-view">
        <Card>
            <p slot="title">文章列表</p>
            <span slot="extra">
                <Button icon="loop" type="primary" @click.prevent="getData">刷新列表</Button>
            </span>
            <Row>
                <Col>
                <Table border="true" :loading="loading" stripe="true" height="450" :context="self" :columns="columns" :data="data"></Table>
                </Col>
            </Row>
            <Row style="padding: 5px 0">
                <Col>
                <Page ref="Page"
                      :total="page.total"
                      :size="page.size"
                      @on-change="handleChangePage"
                      @on-page-size-change="handleChangePageSize"
                      :page-size-opts="page.sizes" show-sizer show-elevator></Page>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import util from '@/libs/util';

    const editButton = (vm, h, row, index) => {
        return h('a', {
            style: {
                margin: '5px'

            },
            on: {
                'click': (event) => {
                    vm.edit(row, index)
                }
            }
        }, '编辑');
    };

    const auditRejectButton = (vm, h, row, index) => {
        return h('Poptip', {
            props: {
                confirm: true,
                title: '您确认该文章拒绝通过吗？',
                transfer: true
            },
            on: {
                'on-ok': () => {
                    vm.reject(row, index);
                }
            }
        }, [
            h('a', {
                style: {
                    margin: '5px',
                    color: 'red'
                }
            }, '拒绝通过')
        ]);
    };

    const auditPassButton = (vm, h, row, index) => {
        return h('Poptip', {
            props: {
                confirm: true,
                title: '您确认该文章审核通过吗？',
                transfer: true
            },
            on: {
                'on-ok': () => {
                    vm.pass(row, index);
                }
            }
        }, [
            h('a', {
                style: {
                    margin: '5px',
                    color: 'green'
                }
            }, '审核通过')
        ]);
    };


    const toggleStatusButton = (vm, h, row, index) => {
        let title = !row.is_delete ? '您确定要删除该文章？' : '您确定要恢复该文章？';
        return h('Poptip', {
            props: {
                confirm: true,
                title: title,
                transfer: true
            },
            on: {
                'on-ok': () => {
                    vm.toggleStatus(row, index);
                }
            }
        }, [
            h('a', {
                style: {
                    margin: '5px',
                    color: !row.is_delete ? 'red' : 'green'
                }
            }, !row.is_delete ? '删除' : '恢复')
        ]);
    };

    export default {
        components: {
        },

        data () {
            return {
                self: this,
                loading: false,
                page: {
                    total: 0,
                    current: 1,
                    size: 10,
                    sizes: [10, 30, 50, 100],
                },
                columns: [
                    {
                        title: '文章ID',
                        key: 'id',
                        width: 80
                    },
                    {
                        title: '文章标题',
                        key: 'title'
                    },
                    {
                        title: '公开级别',
                        key: 'openness_text'
                    },
                    {
                        title: '所属分类',
                        key: 'category_text'
                    },
                    {
                        title: '标签',
                        key: 'tags_text',
                    },
                    {
                        title: '阅读量',
                        key: 'read_quantity',
                    },
                    {
                        title: '发布时间',
                        key: 'published_at'
                    },
                    {
                        title: '状态',
                        key: 'status_text'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data: []
            }
        },

        created () {
            this.init();
        },

        mounted () {
            this.getData();
        },

        watch: {
            'page': (page) => {
                this.$refs.Page.total = page.total;
                this.$refs.Page.current = page.current;
            }
        },

        methods: {
            init () {
                let vm = this;
                this.columns.forEach(item => {
                    if (item.key == 'action') {
                        item.render = (h, param) => {
                            const buttons = [];
                            buttons.push(h('a', {
                                on: {
                                    'click': () => {
                                        this.$Modal.info({
                                            content: param.row.content,
                                            scrollable: true,
                                            width: '900'
                                        });
                                    }
                                }
                            }, '查看内容'));
                            buttons.push(editButton(vm, h, param.row, param.index));
                            if (param.row.status == 'wait_audit') {
                                buttons.push(auditPassButton(vm, h, param.row, param.index));
                                buttons.push(auditRejectButton(vm, h, param.row, param.index));
                            }
                            buttons.push(toggleStatusButton(vm, h, param.row, param.index));

                            return buttons;
                        };
                    }
                });
            },

            getData () {
                this.$Message.loading('数据加载中...');
                this.loading = true;
                util.api().get(`/admin/api/cms/articles?page=${this.page.current}`, {
                    headers: {
                        pageSize: this.page.size,
                    }
                }).then((resp) => {
                    this.$Message.destroy();
                    if (resp.data.status == true) {
                        this.data = resp.data.data;
                        this.page.total = resp.data.meta.total;
                        this.page.current = resp.data.meta.current_page;
                    } else {
                        this.$Message.error(resp.data.message);
                    }
                    this.loading = false;
                }).catch((e) => {
                    this.$Message.destroy();
                    if (e.response) {
                        this.$Notice.error({ title: '网络请求异常', desc: e.response.data.message});
                    } else {
                        this.$Message.error('网络请求错误');
                    }
                    this.loading = false;
                });
            },

            handleChangePage (page) {
                this.page.current = page;
                this.getData();
            },

            handleChangePageSize (size) {
                this.page.size = size;
                this.getData();
            },

            edit(row, index) {
                this.$router.push({
                    name: 'admin-cms-article-edit',
                    query: {
                        articleId: row.id
                    }
                })
            },

            pass(row, index) {
                util.api().patch(`/admin/api/cms/articles/${row.id}/pass`).then((resp) => {
                    if (resp.data.status == true) {
                        this.data[index].status = resp.data.data.status;
                        this.data[index].status_text = resp.data.data.status_text;
                        this.$Notice.success({ title: resp.data.message });
                    } else {
                        this.$Notice.error({ title: resp.data.message });
                    }
                }).catch((e) => {
                    util.handleApiException(e, this, '文章审核失败');
                });
            },

            reject(row, index) {
                util.api().patch(`/admin/api/cms/articles/${row.id}/rejection`).then((resp) => {
                    if (resp.data.status == true) {
                        this.data[index].status = resp.data.data.status;
                        this.data[index].status_text = resp.data.data.status_text;
                        this.$Notice.success({ title: resp.data.message });
                    } else {
                        this.$Notice.error({ title: resp.data.message });
                    }
                }).catch((e) => {
                    util.handleApiException(e, this, '文章审核失败');
                });
            },

            toggleStatus(row, index) {
                if (row.is_delete === true) {
                    this.restore(row, index);
                } else {
                    this.delete(row, index);
                }
            },

            delete (row, index) {
                util.api().delete(`/admin/api/cms/articles/${row.id}`).then((resp) => {
                    if (resp.data.status == true) {
                        this.data[index].is_delete = true;
                        this.$Notice.success({ title: '删除文章成功', desc: resp.data.message });
                    } else {
                        this.$Notice.error({ title: '删除文章失败', desc: resp.data.message });
                    }
                }).catch((e) => {
                   util.handleApiException(e, this, '删除文章失败');
                });
            },

            restore (row, index) {
                util.api().patch(`/admin/api/cms/articles/${row.id}/restore`).then((resp) => {
                    if (resp.data.status == true) {
                        this.data[index].is_delete = false;
                        this.$Notice.success({ title: '恢复文章成功', desc: resp.data.message });
                    } else {
                        this.$Notice.error({ title: '恢复文章失败', desc: resp.data.message });
                    }
                }).catch((e) => {
                   util.handleApiException(e, this, '恢复文章失败');
                });
            }
        }
    };
</script>

<style>

</style>
